<template>
  <view class="uni-padding-wrap uni-common-mt">
    <view class="text-box">
      <text>{{ text || '暂无内容' }}</text>
    </view>

    <view class="uni-btn-v">
      <button type="primary" :disabled="!canAdd" @click="add">add line</button>
      <button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
    </view>
  </view>
</template>

<script>
/* 你的 data & methods 保持不动 */
export default {
  data() {
    return {
      texts: [
        'HBuilder，900万开发者选择的IDE',
        'MUI，轻巧、漂亮的前端开源框架',
        'wap2app，M站快速转换原生体验的App',
        '5+Runtime，为HTML5插上原生的翅膀',
        'HBuilderX，轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        'HBuilder，900万开发者选择的IDE',
        'MUI，轻巧、漂亮的前端开源框架',
        'wap2app，M站快速转换原生体验的App',
        '5+Runtime，为HTML5插上原生的翅膀',
        'HBuilderX，轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        '......'
      ],
      text: '',
      canAdd: true,
      canRemove: false,
      extraLine: []
    }
  },
  methods: {
    add(e) {
      this.extraLine.push(this.texts[this.extraLine.length % 12])
      this.text = this.extraLine.join('\n')
      this.canAdd = this.extraLine.length < 12
      this.canRemove = this.extraLine.length > 0
    },
    remove(e) {
      if (this.extraLine.length > 0) {
        this.extraLine.pop()
        this.text = this.extraLine.join('\n')
        this.canAdd = this.extraLine.length < 12
        this.canRemove = this.extraLine.length > 0
      }
    }
  }
}
</script>

<style scoped>
/* ========== 统一间距 ========== */
.uni-padding-wrap {
  padding: 30rpx;
}
.uni-common-mt {
  margin-top: 30rpx;
}

/* ========== 文本展示区 ========== */
.text-box {
  background: #fff;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  padding: 24rpx;
  max-height: 400rpx;
  overflow-y: auto;
  font-size: 32rpx;
  line-height: 1.8;
  color: #333;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
}

/* ========== 按钮区域 ========== */
.uni-btn-v {
  margin-top: 40rpx;
}
.uni-btn-v button {
  margin-bottom: 20rpx;
}
</style>